<template>
	<wioc-card  shadow="shadow" border="radius" >
		<ul class="doList" v-if="type==='typeOne'">
			<li  v-for="(Item,index) in dataList" :key="index">
				<wioc-link-url :href="Item.url" target="_self">
					<i :style="'background-color:'+colorList[index%colorList.length]+';box-shadow:0 0.05rem 0.05rem  -0.01rem'+colorList[index%colorList.length]">
						<b class="new" v-if="Item.new">NEW</b>
						<b class="num" v-else-if="Item.num>0">{{Item.num>99?'99+':Item.num}}</b>
						<wioc-icon-svg :name="Item.icon" style="margin:22%;"></wioc-icon-svg>
					</i>
					<h3>{{Item.name}}</h3>
				</wioc-link-url>
			</li>
		</ul>

		<div class="flexhead" v-else-if="type==='typeTwo'">
			<wioc-link-url :to="item.url"  class="showbox" :style="'background:'+colorList1[index]"  v-for="(item,index) in dataList" :key="index">
				<div class="iconbox" :style="'background:'+colorList2[index]">
					<wioc-icon-svg class="icon" :name="item.icon"></wioc-icon-svg>
				</div>
				<p class="content">
					{{item.name}}
				</p>
			</wioc-link-url>
		</div>
	</wioc-card>
</template>

<script>
    export default {
        name: "wioc-do-list",
		props:{
			dataList: {
				type: Array,
				required: true
			},
			colorList: {
				type: Array,
				default: function(){
					return ['#6aceb5','#ffc25d','#7ad9a6','#5e76f9','#50a1f2','#f1cc52']
				}
			},
			type:{
			    type:String,
				default:'typeOne'
			}
		},
        data(){
            return{
                colorList1:["#7ba4fd","#ffc362","#4da0f2","#6acfb6"],
                colorList2:["#6582f9","#ffb43b","#51a2f0","#66baa2"],
            }
        }
    }
</script>

<style lang="less" scoped>
	.doList{
		display: flex;
		flex-wrap: wrap-reverse;
		align-items: center;
		text-align:center;
		li{
			// width: 33.3%;
			flex: 1;
			padding: 0.1rem 0;
			i{
				display: block;
				width: 0.45rem;
				height: 0.45rem;
				margin: 0 auto;
				background-color:#69c8b0;
				border-radius:35%;
				box-shadow:0 0.05rem 0.05rem  -0.01rem #69c8b0;
				position: relative;
				.num{
					position: absolute;
					top:-15%;
					right:-20%;
					display: block;
					line-height: 0.2rem;
					min-width: 0.2rem;
					min-height: 0.2rem;
					font-size: 0.11rem;
					text-align: center;
					color: #FFFFFF;
					background: #f66464;
					border-radius:50%;
					font-weight: normal;
				}
				.new{
					position: absolute;
				    top:-10%;
					right: -30%;
					display: block;
					padding-left: 0.008rem;
					padding-right: 0.008rem;
					font-size: 0.11rem;
					text-align: center;
					color: #FFFFFF;
					background: #ff9e00;
					border-radius:0.03rem;
					font-weight:normal;
				}
			}
			h3{
				margin: 0;
				text-align: center;
				font-size: 0.15rem;
				line-height: 0.41rem;
				font-family:PingFangSC-Regular;
				letter-spacing: 0.01rem;
				color: #595959;
				font-weight: normal;
			}
		}
	}
	.flexhead{
		width: 100%;
		height:1.1rem;
		display: flex;
		// justify-content: space-between;
		.showbox{
			// width: .74rem;
			height: .91rem;
			background: yellow;
			border-radius: 9%;
			display: inline-block;
			width: 24%;
			margin-right: 0.05rem;
			.iconbox{
				width: .5rem;
				height: .5rem;
				margin: .1rem auto 0;
				border-radius: 50%;
				border-radius: 50%;
				border: 1px solid #ffffff40;
				box-shadow: #66666691 0px 0.025rem 3px;
				.icon{
					width: .3rem;
					height: .3rem;
					margin-left: 50%;
					margin-top: 50%;
					transform: translateX(-50%) translateY(-50%);
				}
			}
			.content{
				width: 90%;
				text-align: center;
				margin-top: 0.07rem;
				margin-left: 5%;
				font-size: .12rem;
				color: white;
			}
		}
	}
</style>
